<template>
  <text class="sub-title"> — 教师个人信息</text>
  <title1></title1>
  <Navigation></Navigation>
  <el-container style="position: fixed;top: 130px;left: 500px;">
    <el-text>输入查询教师的工号:</el-text>
    <el-input v-model="tno" style="padding-left: 10px; width: 120px" placeholder="" />
    <el-button plain @click="search" style="margin-left: 50px">
      检索
    </el-button>
  </el-container >
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
          <span>
            <el-icon style="margin-left:10px;"><User/></el-icon>教师 {{UserName}}
          </span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="工号">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="姓名">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="性别">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="年龄">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-button type="primary" @click="getinfo">刷新</el-button>
    <template v-if="!isEditing">
      <el-button type="primary" @click="enableEditing">修改</el-button>
    </template>
    <template v-else>
      <el-button type="success" @click="open">保存</el-button>
      <el-button type="warning" @click="cancelEdit">取消</el-button>
    </template>
  </el-card>

</template>

<script>
import { el } from 'element-plus/es/locales.mjs';
import title1 from "../components/title.vue";
import Navigation from "../components/navigation_adm.vue";
import {User} from "@element-plus/icons-vue";

export default {
  name: 'adm_tinfo',
  components: {
    User,
    Navigation,
    title1
  },
  data() {
    return{
      tno:'',
      isEditing:false,
    }
  },

  mounted() {
    document.title = '管理员后台系统'; // 动态设置页面标题
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  }
}
</script>

<style scoped>
.sub-title{
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}
.box-card {
  position:fixed;
  top:200px;
  width:80%;
  left:280px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>